<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="../inc/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>我的等级</title>
    <link rel="stylesheet" type="text/css" href="${contextPath}/static/prize/css/style.css">
    <script type="text/javascript" src="${contextPath}/static/prize/js/jquery.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/prize/js/awardRotate.js"></script>
    <script type="text/javascript">
        $(function () {
            var bRotate = false;
            var rotateFn = function (angles, txt) {
                bRotate = !bRotate;
                $('#rotate').stopRotate();
                $('#rotate').rotate({
                    angle: 0,
                    animateTo: angles + 1800,
                    duration: 8000,
                    callback: function () {
                        // alert(txt);
                        $(".bg").css("display", "block");
                        $(".black").click(function () {
                            $(".bg").fadeOut();
                        });
                        $("#go").click(function () {
                            $(".bg").fadeOut();
                        });
                        $("#stop").click(function () {
                            $(".bg").fadeOut();
                        });

                        if (txt == '0') {
                            $("#result").html("很遗憾，没中奖，下次加油");
                            $("#tip").html("下次抽奖前，先洗个手哦~");
                            $("#plus").html("");
                        } else {
                            $("#result").html("恭喜您抽中了" + txt + "个馒头");
                            $("#tip").html("您的手气真旺");
                            $("#plus").html("+" + txt);
                        }

                        var number = parseInt($("#number").text());
                        var mt = number - 10 + parseInt(txt);
                        $("#number").text(mt);
                        var tempDiv = $('#baseDiv').clone().css("display", "block");
                        tempDiv.insertAfter($('#title'));
                        var now = new Date();
                        var year = now.getFullYear();
                        var month = now.getMonth();
                        var date = now.getDate();
                        var hours = now.getHours();
                        var min = now.getMinutes();
                        var seconds = now.getSeconds();
                        if (seconds < 10) {
                            seconds = "0" + seconds
                        }
                        if (min < 10) {
                            min = "0" + min
                        }
                        if (txt != '0') {
                            $(tempDiv).find('#data').parent().parent().css('display', '');
                            $(tempDiv).find('#data').text(year + "-" + (month + 1) + "-" + date + "  " + hours + ":" + min + ":" + seconds);
                        } else {
                            $(tempDiv).find('#data').parent().parent().css('display', 'none');
                        }
                        $(tempDiv).find('#data1').text(year + "-" + (month + 1) + "-" + date + "  " + hours + ":" + min + ":" + seconds);
                        var height = $('#baseDiv').outerHeight(true);
                        $("#content").css("max-height", height * 5 + 12);
                        bRotate = !bRotate;

                        // 执行抽奖操作
                        $.ajax({
                            url: "${contextPath}/admin/addPrize",
                            data: {
                                userId: $('#userId').val(),
                                coin: txt
                            },
                            success: function () {

                            }
                        });
                    }
                })
            };

            $('.pointer').click(function () {
                var number = parseInt($("#number").text());
                if (number < 10) {
                    alert("您的馒头数目不足十个");
                    return false;
                }

                if (bRotate)return;
                var item = rnd();
                switch (item) {
                    case 449:
                        rotateFn(20, '449');
                        break;
                    case 19:
                        rotateFn(62, '19');
                        break;
                    case 999:
                        rotateFn(111, '999');
                        break;
                    case 199:
                        rotateFn(159, '199');
                        break;
                    case 99:
                        rotateFn(209, '99');
                        break;
                    case 29:
                        rotateFn(261, '29');
                        break;
                    case 10:
                        rotateFn(283, '10');
                        break;
                    case 0:
                        rotateFn(339, '0');
                        break;
                }
                console.log(item);
            });
        });
        function rnd() {
            var rate1 = $('#rate1').val();
            var rate2 = $('#rate2').val();
            var rate3 = $('#rate3').val();
            var rate4 = $('#rate4').val();
            var rate5 = $('#rate5').val();
            var rate6 = $('#rate6').val();
            var rate7 = $('#rate7').val();
            var rate8 = $('#rate8').val();

            var array = new Array();
            for (var i = 0; i < rate1; i++) {
                array.push(0);
            }
            for (var i = 0; i < rate2; i++) {
                array.push(10);
            }
            for (var i = 0; i < rate3; i++) {
                array.push(19);
            }
            for (var i = 0; i < rate4; i++) {
                array.push(29);
            }
            for (var i = 0; i < rate5; i++) {
                array.push(99);
            }
            for (var i = 0; i < rate6; i++) {
                array.push(199);
            }
            for (var i = 0; i < rate7; i++) {
                array.push(499);
            }
            for (var i = 0; i < rate8; i++) {
                array.push(999);
            }

            var result = Math.random() * 100;
            var resultPlus = parseInt(result);
            var flag = 0;

            for (var j = 0; j < array.length; j++) {
                if (resultPlus == j) {
                    flag = array[j];
                }
            }

            return flag;
        }
    </script>
</head>
<body id="body">
<header class="position" id="header">
    <img src="${contextPath}/static/prize/img/5.png">
    <div class="turntable-bg">
        <img src="${contextPath}/static/prize/img/2.png" alt="pointer" class="pointer">
        <img id="rotate" src="${contextPath}/static/prize/img/3.png" alt="turntable" class="rotate">
        <img src="${contextPath}/static/prize/img/4.png">
    </div>
    <div class="number">
        <span>我的馒头：<span id="number">${userInfo.coin}</span></span>
        <input type="hidden" id="userId" value="${userInfo.id}"/>
        <input type="hidden" id="rate1" value="${prizeList.get(0).pro}"/>
        <input type="hidden" id="rate2" value="${prizeList.get(1).pro}"/>
        <input type="hidden" id="rate3" value="${prizeList.get(2).pro}"/>
        <input type="hidden" id="rate4" value="${prizeList.get(3).pro}"/>
        <input type="hidden" id="rate5" value="${prizeList.get(4).pro}"/>
        <input type="hidden" id="rate6" value="${prizeList.get(5).pro}"/>
        <input type="hidden" id="rate7" value="${prizeList.get(6).pro}"/>
        <input type="hidden" id="rate8" value="${prizeList.get(7).pro}"/>
    </div>
    <p class="tips">每次抽奖将消耗10个馒头</p>
</header>
<div id="content" style="overflow: hidden;margin-bottom: 10%;padding-top: .6rem;">
    <div id="title"></div>
</div>

<!-- <section class="flex_s" id="baseSection">
    <div>
        <p class="font3">中奖</p>
        <p style="color: #999999;font-size: 1.4rem;padding-top: 1rem">2016-03-12&nbsp;&nbsp;&nbsp;14:34</p>
    </div>
    <div >
        <span style="font-size: 2rem;color: #ff6f6a;" id="plus"></span>
    </div>
</section> -->
<div class="bg">
    <div class="black"></div>
    <div class="content_alert">
        <div class="nr">
            <p id="result"></p>
            <p id="tip">人气真嗨</p>
        </div>
        <div class="flex btn">
            <span id="go">继续抽奖</span>
            <span id="stop">暂时不抽了</span>
        </div>
    </div>
</div>

<div id="baseDiv" class="baseDiv" style="display: none;">
    <section class="flex_s" id="box" style="margin-top: 0">
        <div>
            <p class="font3">中奖</p>
            <p class="data" id="data" style="color: #999999;font-size: 1.4rem;padding-top: 1rem"></p>
        </div>
        <div>
            <span style="font-size: 2rem;color: #ff6f6a;" id="plus"></span>
        </div>
    </section>
    <section class="flex_s" id="box1">
        <div>
            <p class="font3">抽奖</p>
            <p style="color: #999999;font-size: 1.4rem;padding-top: 1rem" class="data" id="data1"></p>
        </div>
        <div>
            <span style="font-size: 2rem;color: #2dc8ff;">-</span><span style="font-size: 2rem;color: #2dc8ff;">10</span>
        </div>
    </section>
</div>
</body>
</html>